import React, {PureComponent} from 'react';
import {StyleSheet, View, Text, Image, TouchableWithoutFeedback} from 'react-native';

export default class extends PureComponent {

    render() {
        const {loginByWechat} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.titleWrap}>
                    <View style={styles.sp}/>
                    <Text style={styles.title}>使用第三方账号登录</Text>
                </View>
                <View style={styles.list}>
                    <TouchableWithoutFeedback onPress={loginByWechat}>
                        <View style={styles.item}>
                            <Image source={require('../../../images/social/socialize_wechat.png')}
                                   style={styles.img}/>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        margin: 40
    },
    titleWrap: {
        width: '100%',
        alignItems: 'center'
    },
    sp: {
        position: 'absolute',
        width: '100%',
        height: 1,
        backgroundColor: '#e5e5e5',
        top: '50%',
        left: 0
    },
    title: {
        fontSize: 12,
        zIndex: 2,
        padding: 6,
        backgroundColor: '#fff'
    },
    list: {
        height: 60,
        padding: 20,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    item: {
        width: 36,
        height: 36,
        marginLeft: 10,
        marginRight: 10
    },
    img: {
        width: '100%',
        height: '100%',
        borderRadius: 18,
        borderWidth: 1,
        borderColor: '#f1f1f1'
    }
});
